<template>
    <el-card class="blog-main--card">
  <div class="blog-article">
  <h3 class="blog-article--title">{{article.title}}</h3>
  <div class="blog-article--info">
    <div class="blog-article--message">
      <span class="blog-info--item">
      作者: {{this.nikname}}
      </span>
      <span class="blog-info--item">
       {{article.date}}
      </span>
    </div>
    <div class="visible-xs">
      <span class="blog-info--item">
        <i class="el-icon-star-off blog-user--like" @click="like" :class="{active:isLike}"></i>{{likeNum}}
      </span>
      <span class="blog-info--item">
        <i class="el-icon-view"></i>{{article.hit_num}}
      </span>
      <span class="blog-info--item">
        <i class="el-icon-chat-line-round"></i>{{article.comment_num}}
      </span>
    </div>
  </div>
  <div class="blog-article--content" v-html="article.content">
  </div>
</div>
</el-card>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const {mapGetters, mapActions} = createNamespacedHelpers('like');
export default {
  components:{
  },
  data() {
    return {
      stepNum : 0 
    }
  },
  props: {  
    article: {
      type: Object
    },
    id:{
      type: String
    },
  },
created(){
},
mounted(){
  this.$EventBus.$on('addLike', () => {
    if (this.isLike)
    {
      this.stepNum += 1
    }
    else
    {
      this.stepNum += -1
    }
  })
},
watch:{},
computed:{
  isLike() {
    return this.localLike(this.id)
  },
  ...mapGetters({
    localLike: 'isLike'
  }),
  likeNum() {
    return Math.max(0, this.article.like_num + this.stepNum)
  },
  nikname() {
    return this.article?.author?.nikname || 'doggel'
  },
},
methods:{
  changeLike() {
    this.stepNum += this.isLike ? -1 : 1
  },
  ...mapActions(['pullLike', 'pushLike', 'sendLikes']),
  like() {
    if (this.$store.state.token)
    {
      this.changeLike()
      this[this.isLike ? 'pullLike' : 'pushLike']({aid: this.id})
        //发送点赞请求
      this.sendLikes({aid: this.id});
    }
    else
    {
      this.$notify({
          title: '警告',
          message: '暂无权限 请先登录',
          type: 'warning'
      })
    }
  }
  
},
beforeDestroy() {
  this.$EventBus.$off('addLike')
},
}
</script>
<style lang="scss" scoped>
i {
  cursor: pointer;
}

.blog-main--card {
  margin-bottom: 10px;
}
  .blog-article {
    text-align: center;
    .blog-article--title {
      font-size: 26px;
      margin-bottom: 25px;
    }
    .blog-article--message {
      width: 55%;
      margin: 0 auto;
      margin-bottom: 15px;
      background-color: #909399;
      color: #f5f5f5;
      .blog-info--item {
        margin-right: 10px;
      }
    }
    .visible-xs {
      margin-bottom: 10px;
      .blog-info--item {
      margin-right: 5px;
      user-select: none;
      .blog-user--like.active {
       color: #499
    }
    }
    }
    .blog-article--content {
      text-align: left;
      text-indent: 2em;
    }
  }
</style>